import React, { Component } from 'react';
import { View, Text, StyleSheet, ScrollView, Image, Alert, Platform, TouchableOpacity, Dimensions, TouchableHighlight } from 'react-native';
import { List, Button, Toast, Modal, Flex } from 'antd-mobile-rn';
import Utils from '../../../../utils';
import Jpush from "jpush-react-native";
import api from '../../../../utils/api';
import { Echarts } from 'react-native-secharts';

const window = Dimensions.get("window");

const Item = List.Item;

export default class User extends Component {

    static navigationOptions = () => {
        return {
            title: "我的",
            tabBarOnPress: (sceen) => {
                const { defaultHandler, navigation } = sceen;
                const onTabBarPress = navigation.getParam("onTabBarPress", () => { });
                if (onTabBarPress) {
                    onTabBarPress();
                }
                defaultHandler();
            }
        }
    }

    state = {
        user: {},
        statis: {},
        listenIsOpen: false,
        readIsOpen: false
    }


    setTitleNavigation = () => {
        const titleNavigation = this.props.screenProps.navigation;
        titleNavigation.setParams({
            "titleOptions": {
                title: ""
            }
        });

    }

    getUserInfo = () => {
        api({
            url: "/user/getUser"
        }).then(data => {
            if (data.success) {
                this.setState({
                    user: data.result
                })
            }
        })
    }

    getUserStatistics = () => {
        api({
            url: "/user/getStatistics"
        }).then(data => {
            this.setState({
                statis: data.result
            })
        })
    }

    componentDidMount() {


        const navigation = this.props.navigation;
        navigation.setParams({
            onTabBarPress: () => {
                this.setTitleNavigation();

                Utils.getLoginInfo().then(user => {
                    console.log("user::", user);
                    const u = this.state.user;
                    if (!u) {
                        this.setState({
                            user: user
                        });
                    }

                })

                this.getUserStatistics();
            }
        })
        this.setTitleNavigation();

        Utils.getLoginInfo().then(user => {
            console.log("user::", user);
            this.setState({
                user: user
            });
        });

        this.getUserInfo();
        this.getUserStatistics();



    }


    logOut = () => {
        // const { navigate, dispatch } = this.props.screenProps.navigation;
        Alert.alert("提示", "是否退出账号?", [
            { text: "取消" },
            {
                text: "确定", onPress: () => {
                    Utils.removeStorage("LoginUserInfo").then(() => {
                        Jpush.deleteAlias(() => { }, () => { });

                        Utils.navigation(this.props.screenProps.navigation, "/app/login", {});

                    })

                }
            },
        ])
    }


    render() {
        const { user, listenIsOpen, readIsOpen } = this.state;
        const { listen, read } = this.state.statis;
        return (
            <ScrollView>
                <View
                    style={{ flex: 1, backgroundColor: '#f5f5f9' }}

                >
                    <TouchableOpacity

                        onPress={() => {
                            const navigation = this.props.screenProps.navigation;
                            navigation.navigate("/user/detail", {
                                user: user, back: () => {
                                    this.getUserInfo();
                                }
                            });
                        }}
                        activeOpacity={0.7}
                        style={{
                            padding: 20,
                            backgroundColor: "#fff",
                            paddingBottom: 0
                        }}>


                        <View style={{ flexDirection: "row", alignItems: "center", backgroundColor: "#fff", borderBottomColor: "#bfc5d2", borderBottomWidth: 0.5, paddingBottom: 10, position: "relative" }}>

                            <View>
                                <Image style={{ width: 60, height: 60, borderRadius: 30 }} source={{ uri: user.image }} />
                            </View>
                            <View>
                                <Text style={{ fontSize: 20, fontWeight: "bold", color: "#000", marginLeft: 15, marginBottom: 8 }}>{user.name ? user.name : user.id}</Text>
                                <Text numberOfLines={1} style={{ color: "#fcb03c", fontSize: 14, maxWidth: 250, paddingLeft: 15 }}>{user.declaration}</Text>
                            </View>

                            <View style={{
                                position: "absolute",
                                right: 0,
                                top: 5
                            }}>
                                <Image source={require("./img/u-1.png")} style={{
                                    width: 20,
                                    height: 20
                                }}></Image>
                            </View>

                        </View>
                    </TouchableOpacity>
                    <View style={{
                        padding: 20,
                        backgroundColor: "#fff",
                        marginBottom: 10
                    }}>
                        <TouchableOpacity style={{
                            height: 30,
                            alignItems: "center",
                            justifyContent: "center",
                            backgroundColor: "#f5f5f5",
                            borderRadius: 14
                        }}
                            onPress={() => {
                                const navigation = this.props.screenProps.navigation;
                                navigation.navigate("/user/target", {
                                    back: () => {
                                        this.getUserInfo();
                                    }
                                });
                            }}
                        >
                            <Text numberOfLines={1} style={{ fontSize: 12, color: "#ff5a6f" }}>{user.examCountdown}</Text>
                        </TouchableOpacity>
                    </View>
                    <List>
                        <Item
                            arrow="horizontal"


                            thumb={<Image source={require("./img/u-2.png")} style={{ width: 15, height: 15 }}></Image>}
                            onClick={() => {
                                // appNavigation.navigate("UserTarget");
                                const navigation = this.props.screenProps.navigation;
                                navigation.navigate("/user/target", {
                                    back: () => {
                                        this.getUserInfo();
                                    }
                                });
                            }}>
                            <Text style={{ color: "#1e1f44", fontSize: 14, paddingLeft: 10 }}>
                                备考目标
                        </Text>
                        </Item>
                        <Item
                            arrow="horizontal"

                            thumb={<Image source={require("./img/u-3.png")} style={{ width: 15, height: 15 }}></Image>}
                            onClick={() => {

                                // appNavigation.navigate("FeedBack");
                                const navigation = this.props.screenProps.navigation;
                                navigation.navigate("/user/feedback", {});
                            }}>

                            <Text style={{ color: "#1e1f44", fontSize: 14, paddingLeft: 10 }}>
                                意见反馈
                        </Text>
                        </Item>
                    </List>
                    {
                        listen ? (
                            <View style={{ backgroundColor: "#fff", marginTop: 15, marginBottom: 15,paddingBottom:15 }}>
                                <View style={{ padding: 15,paddingBottom:0 }}>
                                    <View style={{ flexDirection: "row", position: "relative" }}>
                                        <Image source={require("./img/ting.png")} style={{ width: 15, height: 15 }}></Image>
                                        <Text style={{ fontSize: 14, color: "#000", marginLeft: 10 }}>
                                            听力-答题情况分析
                                </Text>
                                        <View style={{ position: "absolute", right: 0, flexDirection: "row" }}>
                                            <View>
                                                <Text style={{
                                                    fontSize: 12,
                                                    color: "#697388"
                                                }}>历史平均分</Text>
                                            </View>
                                            <View>

                                                <Text style={{
                                                    fontSize: 12,
                                                    marginLeft: 7,
                                                    color: "#1E1F44"
                                                }}>{listen.average}分</Text>
                                            </View>
                                        </View>

                                    </View>
                                    <View style={{
                                        borderTopColor: "#e6e6e6",
                                        marginTop: 10,
                                        borderTopWidth: 1,
                                    }}>
                                        <ScrollView horizontal={true}>
                                            <Echarts height={250} width={120 * Object.keys(listen.userLineVo.datas).length} option={{
                                                calculable: true,
                                                tooltip: {
                                                    trigger: 'axis',
                                                    formatter: "{c}"
                                                },
                                                grid: {
                                                    y: 15,
                                                    x: 25,
                                                    x2: 45,
                                                    y2: 30,
                                                    borderWidth: 0

                                                },
                                                color: ["#FCB03C"],
                                                xAxis: [
                                                    {
                                                        name: "",
                                                        type: 'category',
                                                        splitLine: { show: false },//去除网格线
                                                        data: Object.keys(listen.userLineVo.datas),
                                                        // axisLabel: {
                                                        //     interval: 0,
                                                        //     rotate: 0
                                                        // },
                                                        axisLine: {
                                                            lineStyle: {
                                                                color: "#969EB0"
                                                            }
                                                        }
                                                    }
                                                ],
                                                yAxis: [
                                                    {
                                                        name: "",
                                                        type: 'value',
                                                        max: 9,
                                                        min: 0,
                                                        splitNumber: 1,
                                                        splitLine: { show: false },//去除网格线
                                                        axisLine: {
                                                            lineStyle: {
                                                                color: "#969EB0"
                                                            }
                                                        }


                                                    }
                                                ],
                                                series: [
                                                    {

                                                        type: 'line',
                                                        data: Object.keys(listen.userLineVo.datas).map(k => parseFloat(listen.userLineVo.datas[k])),


                                                    }
                                                ]
                                            }} ></Echarts>
                                        </ScrollView>
                                        <View style={{
                                            borderTopColor: "#e6e6e6",
                                            borderTopWidth: 1,
                                        }}>
                                            <TouchableOpacity style={{
                                                paddingTop: 20,
                                                paddingBottom: 20,
                                                position: "relative"
                                            }}
                                                onPress={() => {
                                                    this.setState({
                                                        listenIsOpen: !listenIsOpen
                                                    })
                                                }}
                                            >
                                                <View>
                                                    <Text style={{
                                                        color: "#1E1F44",
                                                        fontSize: 14
                                                    }}>详细数据</Text>
                                                </View>
                                                <View style={{
                                                    position: "absolute",
                                                    right: 10,
                                                    top: 20
                                                }}>
                                                    {
                                                        listenIsOpen ? (<Image
                                                            source={require("../card/img/a-up.png")}
                                                            style={{
                                                                width: 15,
                                                                height: 15
                                                            }}
                                                        ></Image>) : (<Image
                                                            source={require("../card/img/a-down.png")}
                                                            style={{
                                                                width: 15,
                                                                height: 15
                                                            }}
                                                        ></Image>)
                                                    }
                                                </View>
                                            </TouchableOpacity>
                                            <View style={{
                                                display: listenIsOpen ? "flex" : "none"
                                            }}>
                                                <View style={{
                                                    flexDirection: "row",
                                                    marginBottom: 10
                                                }}>
                                                    <View style={{
                                                        width: 100
                                                    }}>
                                                        <Text style={{
                                                            fontSize: 12,
                                                            color: "#1E1F44"
                                                        }}>题型</Text>
                                                    </View>
                                                    <View
                                                        style={{
                                                            width: (window.width - 130) / 4,
                                                            alignItems: "flex-end"
                                                        }}
                                                    >
                                                        <Text style={{
                                                            fontSize: 12,
                                                            color: "#697388"
                                                        }}>正确率</Text>
                                                    </View>
                                                    <View
                                                        style={{
                                                            width: (window.width - 130) / 4,
                                                            alignItems: "flex-end"
                                                        }}
                                                    >
                                                        <Text style={{
                                                            fontSize: 12,
                                                            color: "#697388"
                                                        }}>正确数</Text>
                                                    </View>
                                                    <View
                                                        style={{
                                                            width: (window.width - 130) / 4,
                                                            alignItems: "flex-end"
                                                        }}
                                                    >
                                                        <Text style={{
                                                            fontSize: 12,
                                                            color: "#697388",

                                                        }}>错题数</Text>
                                                    </View>
                                                    <View
                                                        style={{
                                                            width: (window.width - 130) / 4,
                                                            alignItems: "flex-end"
                                                        }}
                                                    >
                                                        <Text style={{
                                                            fontSize: 12,
                                                            color: "#697388"
                                                        }}>练题数</Text>
                                                    </View>
                                                </View>


                                            </View>
                                        </View>
                                    </View>
                                </View>
                                {
                                    listen.userAnswerAnalysisInfoVos.map((item, index) => {
                                        if(!listenIsOpen){
                                            return null;
                                        }
                                        return (
                                            <TouchableHighlight onPress={() => {

                                            }} underlayColor={"#FFD089"} key={index} style={{

                                                height: 36,
                                                alignItems: "center",
                                                justifyContent: "center",
                                                paddingLeft:15,
                                                paddingRight:15
                                            }}>
                                                <View style={{
                                                    flexDirection: "row",
                                                }}>
                                                    <View style={{
                                                        width: 100
                                                    }}>
                                                        <Text style={{
                                                            fontSize: 11,
                                                            color: "#1E1F44"
                                                        }}>{item.categoryName}</Text>
                                                    </View>
                                                    <View
                                                        style={{
                                                            width: (window.width - 130) / 4,
                                                            alignItems: "flex-end"
                                                        }}
                                                    >
                                                        <Text numberOfLines={1} style={{
                                                            fontSize: 12,
                                                            color: "#697388"
                                                        }}>{item.correctRate}</Text>
                                                    </View>
                                                    <View
                                                        style={{
                                                            width: (window.width - 130) / 4,
                                                            alignItems: "flex-end"
                                                        }}
                                                    >
                                                        <Text numberOfLines={1} style={{
                                                            fontSize: 12,
                                                            color: "#697388"
                                                        }}>{item.correctCount}</Text>
                                                    </View>
                                                    <View
                                                        style={{
                                                            width: (window.width - 130) / 4,
                                                            alignItems: "flex-end"
                                                        }}
                                                    >
                                                        <Text numberOfLines={1} style={{
                                                            fontSize: 12,
                                                            color: "#697388"
                                                        }}>{item.errorCount}</Text>
                                                    </View>
                                                    <View
                                                        style={{
                                                            width: (window.width - 130) / 4,
                                                            alignItems: "flex-end"
                                                        }}
                                                    >
                                                        <Text numberOfLines={1} style={{
                                                            fontSize: 12,
                                                            color: "#697388"
                                                        }}>{item.total}</Text>
                                                    </View>
                                                </View>
                                            </TouchableHighlight>
                                        )
                                    })
                                }
                            </View>
                        ) : null
                    }

                    {
                        read ? (
                            <View style={{ backgroundColor: "#fff", marginTop: 15, marginBottom: 15,paddingBottom:15 }}>
                            <View style={{ padding: 15,paddingBottom:0 }}>
                                <View style={{ flexDirection: "row", position: "relative" }}>
                                    <Image source={require("./img/ting.png")} style={{ width: 15, height: 15 }}></Image>
                                    <Text style={{ fontSize: 14, color: "#000", marginLeft: 10 }}>
                                        阅读-答题情况分析
                            </Text>
                                    <View style={{ position: "absolute", right: 0, flexDirection: "row" }}>
                                        <View>
                                            <Text style={{
                                                fontSize: 12,
                                                color: "#697388"
                                            }}>历史平均分</Text>
                                        </View>
                                        <View>

                                            <Text style={{
                                                fontSize: 12,
                                                marginLeft: 7,
                                                color: "#1E1F44"
                                            }}>{read.average}分</Text>
                                        </View>
                                    </View>

                                </View>
                                <View style={{
                                    borderTopColor: "#e6e6e6",
                                    marginTop: 10,
                                    borderTopWidth: 1,
                                }}>
                                    <ScrollView horizontal={true}>
                                        <Echarts height={250} width={120 * Object.keys(read.userLineVo.datas).length} option={{
                                            calculable: true,
                                            tooltip: {
                                                trigger: 'axis',
                                                formatter: "{c}"
                                            },
                                            grid: {
                                                y: 15,
                                                x: 25,
                                                x2: 45,
                                                y2: 30,
                                                borderWidth: 0

                                            },
                                            color: ["#9AC4FF"],
                                            xAxis: [
                                                {
                                                    name: "",
                                                    type: 'category',
                                                    splitLine: { show: false },//去除网格线
                                                    data: Object.keys(read.userLineVo.datas),
                                                    // axisLabel: {
                                                    //     interval: 0,
                                                    //     rotate: 0
                                                    // },
                                                    axisLine: {
                                                        lineStyle: {
                                                            color: "#969EB0"
                                                        }
                                                    }
                                                }
                                            ],
                                            yAxis: [
                                                {
                                                    name: "",
                                                    type: 'value',
                                                    max: 9,
                                                    min: 0,
                                                    splitNumber: 1,
                                                    splitLine: { show: false },//去除网格线
                                                    axisLine: {
                                                        lineStyle: {
                                                            color: "#969EB0"
                                                        }
                                                    }


                                                }
                                            ],
                                            series: [
                                                {

                                                    type: 'line',
                                                    data: Object.keys(read.userLineVo.datas).map(k => parseFloat(read.userLineVo.datas[k])),


                                                }
                                            ]
                                        }} ></Echarts>
                                    </ScrollView>
                                    <View style={{
                                        borderTopColor: "#e6e6e6",
                                        borderTopWidth: 1,
                                    }}>
                                        <TouchableOpacity style={{
                                            paddingTop: 20,
                                            paddingBottom: 20,
                                            position: "relative"
                                        }}
                                            onPress={() => {
                                                this.setState({
                                                    readIsOpen: !readIsOpen
                                                })
                                            }}
                                        >
                                            <View>
                                                <Text style={{
                                                    color: "#1E1F44",
                                                    fontSize: 14
                                                }}>详细数据</Text>
                                            </View>
                                            <View style={{
                                                position: "absolute",
                                                right: 10,
                                                top: 20
                                            }}>
                                                {
                                                    readIsOpen ? (<Image
                                                        source={require("../card/img/a-up.png")}
                                                        style={{
                                                            width: 15,
                                                            height: 15
                                                        }}
                                                    ></Image>) : (<Image
                                                        source={require("../card/img/a-down.png")}
                                                        style={{
                                                            width: 15,
                                                            height: 15
                                                        }}
                                                    ></Image>)
                                                }
                                            </View>
                                        </TouchableOpacity>
                                        <View style={{
                                            display: readIsOpen ? "flex" : "none"
                                        }}>
                                            <View style={{
                                                flexDirection: "row",
                                                marginBottom: 10
                                            }}>
                                                <View style={{
                                                    width: 100
                                                }}>
                                                    <Text style={{
                                                        fontSize: 12,
                                                        color: "#1E1F44"
                                                    }}>题型</Text>
                                                </View>
                                                <View
                                                    style={{
                                                        width: (window.width - 130) / 4,
                                                        alignItems: "flex-end"
                                                    }}
                                                >
                                                    <Text style={{
                                                        fontSize: 12,
                                                        color: "#697388"
                                                    }}>正确率</Text>
                                                </View>
                                                <View
                                                    style={{
                                                        width: (window.width - 130) / 4,
                                                        alignItems: "flex-end"
                                                    }}
                                                >
                                                    <Text style={{
                                                        fontSize: 12,
                                                        color: "#697388"
                                                    }}>正确数</Text>
                                                </View>
                                                <View
                                                    style={{
                                                        width: (window.width - 130) / 4,
                                                        alignItems: "flex-end"
                                                    }}
                                                >
                                                    <Text style={{
                                                        fontSize: 12,
                                                        color: "#697388",

                                                    }}>错题数</Text>
                                                </View>
                                                <View
                                                    style={{
                                                        width: (window.width - 130) / 4,
                                                        alignItems: "flex-end"
                                                    }}
                                                >
                                                    <Text style={{
                                                        fontSize: 12,
                                                        color: "#697388"
                                                    }}>练题数</Text>
                                                </View>
                                            </View>


                                        </View>
                                    </View>
                                </View>
                            </View>
                            {
                                read.userAnswerAnalysisInfoVos.map((item, index) => {
                                    if(!readIsOpen){
                                        return null;
                                    }
                                    return (
                                        <TouchableHighlight onPress={() => {

                                        }} underlayColor={"#9AC4FF"} key={index} style={{

                                            height: 36,
                                            alignItems: "center",
                                            justifyContent: "center",
                                            paddingLeft:15,
                                            paddingRight:15
                                        }}>
                                            <View style={{
                                                flexDirection: "row",
                                            }}>
                                                <View style={{
                                                    width: 100
                                                }}>
                                                    <Text style={{
                                                        fontSize: 11,
                                                        color: "#1E1F44"
                                                    }}>{item.categoryName}</Text>
                                                </View>
                                                <View
                                                    style={{
                                                        width: (window.width - 130) / 4,
                                                        alignItems: "flex-end"
                                                    }}
                                                >
                                                    <Text numberOfLines={1} style={{
                                                        fontSize: 12,
                                                        color: "#697388"
                                                    }}>{item.correctRate}</Text>
                                                </View>
                                                <View
                                                    style={{
                                                        width: (window.width - 130) / 4,
                                                        alignItems: "flex-end"
                                                    }}
                                                >
                                                    <Text numberOfLines={1} style={{
                                                        fontSize: 12,
                                                        color: "#697388"
                                                    }}>{item.correctCount}</Text>
                                                </View>
                                                <View
                                                    style={{
                                                        width: (window.width - 130) / 4,
                                                        alignItems: "flex-end"
                                                    }}
                                                >
                                                    <Text numberOfLines={1} style={{
                                                        fontSize: 12,
                                                        color: "#697388"
                                                    }}>{item.errorCount}</Text>
                                                </View>
                                                <View
                                                    style={{
                                                        width: (window.width - 130) / 4,
                                                        alignItems: "flex-end"
                                                    }}
                                                >
                                                    <Text numberOfLines={1} style={{
                                                        fontSize: 12,
                                                        color: "#697388"
                                                    }}>{item.total}</Text>
                                                </View>
                                            </View>
                                        </TouchableHighlight>
                                    )
                                })
                            }
                        </View>
                        ) : null
                    }
                    <View>
                        <View style={{ marginTop: 20, marginBottom: 20 }}>
                            <TouchableOpacity onPress={this.logOut.bind(this)} style={{
                                borderRadius: 0, height: 48,
                                alignItems: "center",
                                justifyContent: "center",
                                backgroundColor: "#fff",
                                borderBottomColor: "#e6e6e6",
                                borderBottomWidth: 1

                            }} >
                                <Text style={{ fontSize: 14, color: "#b8b8b8" }}>登出账号</Text>
                            </TouchableOpacity>
                        </View>
                    </View>

                </View>
            </ScrollView>
        )
    }
}